<template>
  <div class="">
    <div class="con">
      <!-- <FormPanel
        ref="formPanel"
        :list="formList"
        :cols="3"
        :labelWidth="110"
        formType="add"
        :isSubmitBtn="false"
        @formChange="formChangeHandle"
      /> -->
      <TopFilter :list="formList" :cols="4" labelWidth="100" :collapse="true" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    </div>

    <div class="wrap">
      <div class="left">
        <labourTree :getdata="deptdata" />
      </div>
      <div class="right">
        <FilterTable
          ref="table1"
          :columns="columnsR1"
          :fetchapi="fetchApi"
          :height="260"
          :isColumnFilter="false"
          :isToperInfo="false"
          :params="fetchParams"
          :isSelectColumn="false"
          datakey="data.rows"
          :onColumnsChange="columns => (this.columnsR1 = columns)"
          ><template slot="controls" slot-scope="props">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="addLabour">新增</el-button>
            <!-- <el-button size="small">导出</el-button> -->
          </template>
        </FilterTable>

        <Drawer :visible.sync="labourVisible" :title="dialogTitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
          <labourMain :type="handleType" :rowData="formData" @close="closeLabour" />
        </Drawer>

        <Drawer :visible.sync="partVisible" :title="dialogTitle" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
          <labourMain :type="handleType" :rowData="formData" @close="closePart" />
        </Drawer>
        <FilterTable
          ref="table2"
          :columns="columnsR2"
          :isSelectColumn="false"
          :isColumnFilter="false"
          :isToperInfo="false"
          :dataSource="list2"
          :onColumnsChange="columns => (this.columnsR2 = columns)"
        >
          <template slot="controls" slot-scope="props">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="addPart">新增</el-button>
            <!-- <el-button size="small">导出</el-button> -->
          </template>
        </FilterTable>
      </div>
      <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          zIndex: 99,
          borderTop: '1px solid #e9e9e9',
          padding: '10px 20px',
          background: '#fff',
          textAlign: 'center'
        }"
      >
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="saveDialog">确 定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import labourMain from './labourMain';
import labourPart from './labourPart';
import { findProjectModelList, findMainGroup, findTechnicianWorkType, findLabourList, findLbaourTree } from '@/api/repair/repair/labourManager';
import { dictionary } from '@/utils/dictMixin';
import labourTree from './labourTree';
export default {
  name: 'Repcombination',
  components: {
    labourTree,
    labourPart,
    labourMain
  },
  mixins: [dictionary],
  props: ['repirlist'],
  data() {
    this.BaseTable = null;
    this.conf = { add: '新增', edit: '编辑', show: '显示' };
    return {
      labourVisible: false,
      partVisible: false,
      fetchParams: { xhrAbort: false },
      columns: this.createTableColumns(),
      fetchApi: findLabourList,
      // 右侧teble1
      list1: [],
      columnsR1: this.createTableColumnsR1(),
      // 右侧teble2
      list2: [],
      columnsR2: this.createTableColumnsR2(),
      formList: this.createFormList(),
      handleType: '',
      formData: {},
      deptdata: {
        id: '',
        name: '',
        codename: '',
        list: []
      },
      parmes: {
        list1: '',
        list2: ''
      }
      // selectList:{},
      // flag:''
    };
  },
  created() {
    this.getdictList();
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '项目车型组',
          fieldName: 'modelLabourCode',
          placeholder: '请选择',
          itemList: []
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '主分类名称',
          fieldName: 'primaryGroupName',
          placeholder: '请选择',
          itemList: this.createDictList('1004')
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '维修项目代码',
          fieldName: 'labourCode',
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色代码', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '维修项目名称',
          fieldName: 'labourName',
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色代码', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '维修项目拼音',
          fieldName: 'spellCode',
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '是否下发',
          fieldName: 'downTag',
          placeholder: '请选择',
          itemList: this.createDictList('1004')
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'CHECKBOX',
          label: '',
          fieldName: 'check',
          labelWidth: '10'
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '限制记录',
          fieldName: 'repairGroupCode1',
          initialValue: 30,
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '零件代码',
          fieldName: 'partNo',
          initialValue: '',
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '零件名称',
          fieldName: 'partName',
          initialValue: '',
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '工种',
          fieldName: 'workerTypeCode',
          placeholder: '请选择',
          itemList: []
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '标准工时为空',
          fieldName: 'nullLabour',
          placeholder: '请选择',
          itemList: this.createDictList('1004')
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'INPUT',
          label: '年款',
          fieldName: 'modelYear',
          initialValue: '',
          placeholder: ''
          // rules: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
        },
        {
          type: 'RANGE_DATE',
          label: '销售日期',
          fieldName: 'beginDate|endDate',
          valueFormat: 'yyyy-MM-dd'
        }
      ];
    },
    formChangeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    collapseHandle() {},
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '已添加',
          dataIndex: 'IS_SELECT',
          sorter: true,
          render: props => {
            let val = props.row.IS_SELECT === '1' ? true : false;
            return <el-radio value={val} onInput={val => (props.row.IS_SELECT = val ? '1' : '0')}></el-radio>;
          }
        },
        {
          title: '组合代码',
          dataIndex: 'PACKAGE_CODE',
          sorter: true
        },
        {
          title: '组合类别',
          dataIndex: 'PACKAGE_TYPE_NAME',
          sorter: true
        },
        {
          title: '组合名称',
          dataIndex: 'PACKAGE_NAME',
          sorter: true
        }
      ];
    },
    createTableColumnsR1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 200,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" disabled={props.row.DownTag == '10041001' ? true : false} onClick={() => this.editHandle(props.row)}>
                  编辑
                </el-button>
                <el-divider direction="vertical" />
              </div>
            );
          }
        },
        {
          title: '维修车型分组名称',
          dataIndex: 'modelLabourName',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修车型分组代码',
          dataIndex: 'modelLabourCode',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目代码',
          dataIndex: 'labourCodef',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目代码',
          dataIndex: 'labourCode',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          hidden: true
        },
        {
          title: '维修项目名称',
          dataIndex: 'labourName',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input',
          hidden: false
        },
        {
          title: '项目维修类型',
          dataIndex: 'repairTypeCode',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '标准工时',
          dataIndex: 'stdLabourHour',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派工工时',
          dataIndex: 'assignLabourHour',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修车型分组名称',
          dataIndex: 'workerTypeName',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '索赔工时',
          dataIndex: 'claimLabour',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '拼音代码',
          dataIndex: 'spellCode',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目分组代码',
          dataIndex: 'repairGroupCode',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '总部标准工时',
          dataIndex: 'oemLabourHour',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '是否下发',
          dataIndex: 'downTag',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '创建日期',
          dataIndex: 'createdAt',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新日期',
          dataIndex: 'updatedAt',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '年款',
          dataIndex: 'modelYear',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新状态',
          dataIndex: 'replaceStatus',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    },
    createTableColumnsR2() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          fixed: 'left',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 200,
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text">
                  编辑
                </el-button>
                <el-divider direction="vertical" />
              </div>
            );
          }
        },
        {
          title: '备件代码',
          dataIndex: 'partNo',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备件名称',
          dataIndex: 'partName',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '仓库',
          dataIndex: 'storageName',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型组',
          dataIndex: 'partModelGroupName',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '数量',
          dataIndex: 'partQuantity',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '库存数量',
          dataIndex: 'stockQuantity',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '销售价',
          dataIndex: 'salesPrice',
          // width: 150,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修车型分组代码',
          dataIndex: 'modelLabourCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '维修项目代码',
          dataIndex: 'labourCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '更新码',
          dataIndex: 'rowKey',
          sorter: true
        },
        {
          title: '仓库代码',
          dataIndex: 'storageCode',
          sorter: true
        },
        {
          title: '备件维修车型组set',
          dataIndex: 'partModelGroupCodeSet',
          sorter: true
        }
      ];
    },

    async getdictList() {
      // const res = await findProjectModelList({hasCode:2});
      this.formList[0].itemList = (await findProjectModelList({ hasCode: 2 })).data.map(x => ({ text: x.MODEL_LABOUR_NAME, value: x.MODEL_LABOUR_CODE, index: x.index }));
      const res = await findMainGroup();
      let arr = res.data.map(x => ({ text: x.MAIN_GROUP_CODE, value: x.MAIN_GROUP_CODE }));
      this.formList[1].itemList = arr;
      const res1 = await findTechnicianWorkType();
      let arr1 = res1.data.map(x => ({ text: x.WORKER_TYPE_NAME, value: x.WORKER_TYPE_CODE }));
      console.log(arr1);
      console.log(this.formList);
      this.formList[10].itemList = arr1;
      // this.formList[1].itemList= (await findMainGroup()).data.map(x => ({ text: x.MODEL_LABOUR_NAME, value: x.MODEL_LABOUR_CODE, index: x.index }));
      // this.formList[2].itemList= (await findTechnicianWorkType()).data.map(x => ({ text: x.MAIN_GROUP_NAME, value: x.MAIN_GROUP_CODE, index: x.index }));

      // if(res){
      // let arr= res.map(x => ({ text: x.MODEL_LABOUR_NAME, value: x.MODEL_LABOUR_CODE, index: x.index }));
      // }
    },
    selectChangeHandle(rows) {
      if (!rows.length) {
        this.list1 = [];
        this.list2 = [];
        return;
      }
      this.getWxzhYsList(rows[0]);
      this.getWxzhYxList(rows[0]);
      this.selectList = rows[0];
      console.log('selectList', this.selectList);
    },
    async getWxzhYsList(row) {
      const res = await findProjectModelList(row, { sort: 'LABOUR_CODE', order: 'asc', dmsFuncId: 35100010 });
      console.log('111', res);
      this.list1 = res;
      this.parmes.list1 = res;
    },
    async getWxzhYxList(row) {
      const res = await findProjectModelList(row, { sort: 'PART_NO', order: 'asc', dmsFuncId: 35100010 });
      console.log('222', res);
      this.list2 = res;
      this.parmes.list2 = res;
    },
    closeDialog() {
      this.$emit('close', false);
    },
    changeHandle(val) {
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
    },
    addLabour() {
      this.handleType = 'add';
      this.showLabour();
    },
    editLabour(row) {
      this.handleType = 'edit';
      this.formData = row;
      // console.log(this.formData);
      this.showLabour();
    },

    showLabour() {
      this.dialogTitle = `${this.conf[this.handleType]}维修项目主类`;
      this.labourVisible = true;
    },
    closeLabour(val, type) {
      this.labourVisible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
        // this.subGroupList = [];
        // this.mainInfo={};
      }
    },
    addPart() {
      this.handleType = 'add';
      this.showPart();
    },
    editPart(row) {
      this.handleType = 'edit';
      this.formData = row;
      // console.log(this.formData);
      this.showPart();
    },

    showPart() {
      this.dialogTitle = `${this.conf[this.handleType]}维修项目主类`;
      this.partVisible = true;
    },
    changgeDictYN(val) {
      if (val == '10041001') return '是';
      else return '否';
    },
    closePart(val, type) {
      this.partVisible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
        // this.subGroupList = [];
        // this.mainInfo={};
      }
    },

    saveDialog() {
      let flag = false;
      let reg = this.selectList.PACKAGE_CODE;
      let arr = [...this.repirlist];
      if (arr && arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].PACKAGE_CODE == reg) {
            flag = true;
            break;
          }
        }
      }
      if (flag) {
        this.$notify({
          // title: '警告',
          message: '不允许添加相同的维修组合！',
          type: 'warning'
        });
      } else {
        this.$emit('WxxmList', this.parmes);
        this.$confirm('维修组合新增成功，是否继续新增？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {})
          .catch(() => {
            // this.$notify.info({title: '提示信息',message:'已取消删除'});
            this.closeDialog();
          });
      }

      console.log('维修组合124', reg);
      // if(flag){
      //    alert(1);
      // }else{
      //    this.$emit('WxxmList',this.parmes)
      // }
    }
  }
};
</script>
<style lang="less" scoped>
.con {
  display: flex;
}
.wrap {
  display: flex;
  .left {
    width: 40%;
    .box {
      border: 1px solid #ccc;
      padding-top: 15px;
      padding-right: 15px;
      border-radius: @borderRadius;
      margin-bottom: 20px;
      box-shadow: @boxShadow;
    }
  }
  .right {
    // flex: 1;
    width: 59%;
    margin-left: 10px;
  }
}
</style>
